<template>
  <div class="table-container">
    <h2>药效管理</h2>
    <table>
      <thead>
        <tr>
          <th>药材名称</th>
          <th>功效</th>
          <th>用法</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="index">
          <td>{{ row.herb }}</td>
          <td>{{ row.efficacy }}</td>
          <td>{{ row.usage }}</td>
        </tr>
      </tbody>
    </table>
    <div class="action-buttons">
      <button @click="addRow">新增</button>
      <button @click="editRow">编辑</button>
      <button @click="deleteRow">删除</button>
      <button @click="saveRow">保存</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: Array
  },
  methods: {
    addRow() {
      // 新增一行的逻辑
      console.log('新增一行');
    },
    editRow() {
      // 编辑一行的逻辑
      console.log('编辑一行');
    },
    deleteRow() {
      // 删除一行的逻辑
      console.log('删除一行');
    },
    saveRow() {
      // 保存一行的逻辑
      console.log('保存一行');
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../styles/database.scss';

.table-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  h2 {
    margin-bottom: 1rem;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;

    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }
  }

  .action-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;

    button {
      padding: 5px 10px;
      font-size: 0.875rem;
      margin: 0 5px;
    }

    @media (max-width: 768px) {
      flex-direction: column;
      align-items: center;

      button {
        margin: 5px 0;
      }
    }
  }
}
</style>